	<style>
		
	</style>
	<div class="layui-form layui-form-pane f-form">
			<div class="layui-row layui-col-space1 task-row" style="margin:10px;padding:5px;">
				<label>选择特定的目录后，你可以对该目录下的接口进行拖动排序</label><br/><br/>
				<div style="width:300px;float:left;margin-right:10px">
					<select id="menuId" class="layui-select" name="menuId" lay-filter="menuId" >
						<option value="#(menu.id??)">#(menu.title??)</option>
						#for(data:children_menu_list)
						<option value="#(data.id??)">#(data.title??)</option>
						#end
					</select>
				</div>
			</div>
			<div style="margin:0 15px;overflow: auto;min-height:300px;max-height:calc(100vh - 350px);">
				<ul id="apiList">
				</ul>
			</div>
	</div>
<script type="text/javascript">
	$(function(){
		
		getMenuApiList('#(menu.id??)');
	
		moveTableTr('apiList','li');
	})

	
	//鼠标拖拉tr上下移动
    function moveTableTr(docId,item) {
        $("#"+docId).sortable({
            cursor: "move",
            items: item,//只是tr可以拖动
            opacity: 0.6,//拖动时，透明度为0.6
            revert: false,//释放时，增加动画
            start: function(event, ui) {//开始移动
                let str = event.srcElement.innerHTML;//鼠标点击移动时获取的html内容
            },
            update: function(event, ui) {//移动之后更新排序之后
                let str = event.srcElement.innerHTML;
            }
        });
        $("#"+docId).disableSelection();
    }

	 // 查询目录接口
    function getMenuApiList(menuId){
    	$.ajax({
            type: 'POST',
            url: '#(path)#(apiActionKey)/list',
            data: {'parent_id':menuId,'del':0,'pageSize':5000},
            dataType: 'json',
            success: function(ret){
                $("#apiList").html("");
                var li='';
                var n=1;
                $.each(ret.data.list, function(key, val) {
                      li+=getLiHtml(val.id,val.title,val.type,val.request_mode,n);   
                      n++;
                  }); 
                if(li=='')
                    li='<li style="text-align: center;color:#ccc">该目录无数据</a></li>';
                $("#apiList").html(li);
               	layui.form.render();
               $('.layui-icon-next').hover(function(){
	           	    var index;
	           	    var title="移动到顶层目录 0";
	           	    this.index=layer.tips(title, this,{
	           	        tips:1,
	           	    });
	           	},function(){
	           	    layer.close(this.index);
	           	});
           }
    	}); 
    }

    function getLiHtml(apiId,title,type,requestMode,num){
		var li='<li style="padding:5px;border-bottom: 1px solid #cccc;cursor:move;">'
		if(num<10)
			li+='&nbsp;'+num+'&nbsp;';
		else
			li+=num;
		if(type=='menu'){
			li+='<i class="layui-icon layui-icon-export" style="padding:10px;"></i>'
		}else{
			if(requestMode==undefined)
				requestMode = 'GET';
			li+='<span class="'+requestMode+'" style="padding:10px;">'+requestMode+'</span>'
		}
					
		li+='<span data-id="'+apiId+'">'+title+'</span>';
		li+='</li>';
		return li;
	}

    // 监听目录选择
   	layui.form.on("select(menuId)",function(data){
   		menuId=data.value;
   		// 查询目录接口
   		getMenuApiList(menuId);
   		
   		// 显示添加按钮
   		if(menuId>0){
			$("#addMenuBtn").removeClass('layui-hide');
       	}else{
       		$("#addMenuBtn").addClass('layui-hide');
        }
   	})
   	
   	// 拖拽排序
	function saveSort(){
	    $('#submitBtn').attr("disabled",true)
	    var ids=[];
		$('#apiList').find('li').each(function(){
			var id=$(this).children().eq(1).attr("data-id");
			if(id){
				ids.push(id);
			}
		});
		if(ids.length==0){
			$('#submitBtn').attr("disabled",false)
			layer.msg("无数据，无须保存")
			return;
		}
		var body={
			"ids":ids
		};
		$.ajax({
			type: 'post',
	        url: '#(path)#(apiActionKey)/updateSort',
	        data:JSON.stringify(body),
	        dataType:'json',
	        contentType:"application/json",
	        success:function(data){
	        	var menuId = $('#menuId').val();
	 	    	 getMenuApiList(menuId);
	             showMsg(data.msg);
	        }
		});
	}

	</script>
